page{
	height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow-y: auto;
	padding: 20rpx 30rpx 40rpx 30rpx;
	background: #F7F7F7;
	.demand-info {
		border-radius: 20rpx;
		padding: 36rpx 44rpx 85rpx 44rpx;
		background-color: #ffffff;
		.title {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
			.name {
				font-size: 40rpx;
				color: #333333;
				font-weight: bold;
			}
			.status {
				margin-left: 30rpx;
				font-size: 24rpx;
				width: 85rpx;
				height: 35rpx;
				border-radius: 4rpx;
				padding: 8rpx 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.collect-img {
				margin-left: 20rpx;
				width: 42rpx;
				height: 42rpx;
			}
			.status0 {
				background-color: #22B63B;
				color: #ffffff;
			}
			.status1 {
				background-color: #E8E8E8;
				color: #666666;
			}
		}
		.main-content {
			margin-top: 30rpx;
			color: #999999;
			font-size: 26rpx;
			.text {
				margin-left: 26rpx;
				color: #555555;
			}
		}
		.mian-img {
			display: flex;
			flex-wrap: wrap;
			.img {
				margin: 14rpx 10rpx 0 0;
				height: 100rpx;
				width: 100rpx;
				border-radius: 10rpx;
				image {
					height: 100rpx;
					width: 100rpx;
					border-radius: 10rpx;
				}
			}
		}
		.bottom-btn {
			margin-top: 55rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 489rpx;
				height: 87rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
				color: #ffffff;
			}
			.click-btn {
				background: #0177FD;
			}
			.dis-btn {
				background: #C8C9CC;
			}
			.btn-contact {
				margin-top: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #FFA83E;
				width: 489rpx;
				height: 87rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
				color: #ffffff;
			}
		}
	}
	.join-info {
		margin-top: 26rpx;
		padding: 30rpx 44rpx 15rpx 44rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		.join-list {
			margin-top: 24rpx;
			padding: 20rpx 0 40rpx 0;
			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.service-info {
					display: flex;
					flex-direction: column;
					.name-content {
						display: flex;
						align-items: center;
						.logo {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}
						.name {
							margin-left: 10rpx;
							color: #333333;
							font-size: 28rpx;
							font-weight: bold;
						}
					}
					.service-text {
						margin-top: 14rpx;
						display: flex;
						text {
							min-width: 140rpx;
							height: 40rpx;
							border-radius: 4rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 8rpx 10rpx;
							background-color: #F4F9FF;
							color: #729DCE;
							font-size: 24rpx;
						}
					}
				}
				.success-img {
					width: 96rpx;
					height: 117rpx;
				}
			}
			.service-des {
				margin-top: 40rpx;
				font-size: 24rpx;
				line-height: 36rpx;
				color: #666;
			}
			.service-img {
				display: flex;
				flex-wrap: wrap;
				.img {
					margin: 14rpx 10rpx 0 0;
					height: 100rpx;
					width: 100rpx;
					border-radius: 10rpx;
					image {
						height: 100rpx;
						width: 100rpx;
						border-radius: 10rpx;
					}
				}
			}
			.btn {
				margin-top: 34rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.hire-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 192rpx;
					height: 68rpx;
					background: #F4F4F4;
					border-radius: 86rpx;
					border: 1rpx solid #DCDCDC;
					margin-right: 22rpx;
				}
				.go-contact {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 192rpx;
					height: 68rpx;
					background: #FF6161;
					border-radius: 86rpx;
					color: #ffffff;
				}
			}
		}
		.empty-wrap {
		  display: flex;
		  flex-direction: column;
		  padding-top: 40rpx;
		  align-items: center;
		  .empty-img {
		    width: 160rpx;
		    height: 160rpx;
		  }
		
		  .tips {
				margin-top: 18rpx;
		    font-size: 30rpx;
		    color: #999;
		  }
		}
	}
	
	.img-notice {
		padding: 0 30rpx;
		font-size: 22rpx;
		color: #999;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
}

.fixed-btn {
		.bottom-btn {
			position: fixed;
			bottom: 60rpx;
			left: 30rpx;
			padding: 0 30rpx;
			height: 180rpx;
			width: 690rpx;
			background-color: rgba(1,1,1,.8);
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn-text {
				font-size: 34rpx;
				color: #fff;
				display: flex;
				flex-direction: column;
			} 
			.btn {
				width: 208rpx;
				height: 80rpx;
				color: #fff;
				background: linear-gradient(90deg, #1C87F3 0%, #1CCFF3 100%);
				font-size: 30rpx;
				border-radius: 55rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}